PHP MVC Views

In PHP Routing hebben we gezien dat alle request omgeleid worden naar index.php in de webroot. De html die we per request nodig hebben gaan we met een include in deze index.php laden. Dus de views zijn geen volledige HTML documeten maar bevatten alleen de html die voor deze specifieke request nodig is.

We volgende de afspraken binnen ASP.NET MVC en plaatsen de view bestanden in een submap Views in de webroot van ons project.

Enkele voorbeelden uit Fric-frac

Views/Admin/Index.php
In de Fric-frac app doen we dat niet, maar hier halen we de titel uit het model dat in de controller aan de view werd meegegeven.

<h1><?php echo $model['title'];?></h1>
<article class="index">
    <a class="tile" href="/EventCategory/Index.php">
        <span aria-hidden="true" class="icon-bookmark"></span>
        <span class="screen-reader-text">Event Category</span>
        Event Category
    </a>
    <a class="tile" href="EventTopic/Index.php">
        <span aria-hidden="true" class="icon-price-tag"></span>
        <span class="screen-reader-text">Event Topic</span>
        Event Topic</a>
    <a class="tile" href="Event/Index.html">
        <span aria-hidden="true" class="icon-power"></span>
        <span class="screen-reader-text">Event</span>
        Event Index</a>
    <div class="tile _2x1">Informatieve tegel</div>
</article>

Een ander voorbeeld komt van Views/Event/Index.php. In die view wordt een eventuele foutmelding en melding uit de $model variabele gehaald en getoond. Die view roept een andere, partial view op met de naam Views/Event/ReadingAll.php. Daarin wordt de lijst van events in het $model uitgelezen en getoond met een foreach:

<aside class="list">
    <?php
    if ($model['list']) { ?>
        <table>
            <tr>
                <th></th>
                <th>Naam</th>
                <th>Locatie</th>
            </tr>
            <?php
            foreach($model['list'] as $item) {
                ?>
                <tr>
                    <td>
                        <a class='tile' 
                            href="/Event/readingOne/<?php echo $item['Id'];?>">
                            <span class="icon-arrow-right"></span>
                            <span class="screen-reader-text">ReadingOne</span></a>
                    </td>
                    <td><?php echo $item['Name'];?></td>
                    <td><?php echo $item['Location'];?></td>
                </tr>
            <?php
            }
            ?>
        </table>
    <?php
    } else { ?>
        <p>Geen rijen gevonden in Event tabel.</p>
        <p><?php echo $model['message'];?></p>
        <p><?php echo $model['error'];?></p>
        <!-- <p><?php var_dump($model);?></p> -->
    <?php       
    } ?>
</aside>

De view van Views/Event/UpdatingOne.php is interessant omder er SELECT elementen in staan. In het OPTION element zie je een stukje PHP die nagaat welk OPTION element overeenkomt met de EventCategoryId of EventTopicId om de juiste categorie of topic in het SELECT element te tonen:

<section class="show-room entity">
    <form id="form" method="post" action="/Event/updateOne" class="detail">
        <nav class="command-panel">
            <h2 class="banner">Event</h2>
            <button type="submit" value="insert" name="uc" class='tile'>
                <span class="icon-floppy-disk"></span>
                <span class="screen-reader-text">Update One</span>
            </button>
            <a href="/Event/Index.php" class="tile">
                <span class="icon-cross"></span>
                <span class="screen-reader-text">Annuleren</span>
            </a>
        </nav>
        <fieldset>
            <input type="hidden" id="Id" name="Id" value="{placeholder}" />
            <div>
                <label for="Name">Naam</label>
                <input id="Name" name="Name" type="text" 
                    value="<?php echo $model['row']['Name'];?>" required />
            </div>
            <div>
                <label for="Location">Locatie</label>
                <input id="Location" name="Location" type="text" 
                    value="<?php echo $model['row']['Location'];?>" required />
            </div>
            <div>
                <label for="Starts">Start</label>
                <input id="Starts" name="Starts" type="datetime-local" 
                    value="<?php echo $model['row']['Starts'];?>" />
            </div>
            <div>
                <label for="Ends">Einde</label>
                <input id="Ends" name="Ends" type="datetime-local" 
                    value="<?php echo $model['row']['Ends'];?>" />
            </div>
            <div>
                <label for="Image">Afbeelding</label>
                <input id="Image" name="Image" type="text" 
                    value="<?php echo $model['row']['Image'];?>" required />
            </div>
            <div>
                <label for="Description">Beschrijving</label>
                <input id="Description" name="Description" type="text" 
                    value="<?php echo $model['row']['Description'];?>" required />
            </div>
            <div>
                <label for="OrganiserName">Organizator naam</label>
                <input id="OrganiserName" name="OrganiserName" type="text" 
                    value="<?php echo $model['row']['OrganiserName'];?>" required />
            </div>
            <div>
                <label for="OrganiserDescription">Organizator beschrijving</label>
                <input id="OrganiserDescription" name="OrganiserDescription" type="text" 
                    value="<?php echo $model['row']['OrganiserDescription'];?>" required />
            </div>
            <div>
                <label for="EventCategoryId">Event Category</label>
                <select id="EventCategoryId" name="EventCategoryId">
                <?php
                foreach ($model['listEventCategory'] as $eventCategory) {
                ?>
                    <option value="<?php echo $eventCategory['Id'] ?>"
                    <?php echo $model['row']['EventCategoryId'] === $eventCategory['Id'] ? 'selected = "selected"' : '';?>>
                    <?php echo $eventCategory['Name'] ?></option>
                <?php } ?>
                </select>
            </div>
            <div>
                <label for="EventTopicId">Event Topic</label>
                <select id="EventTopicId" name="EventTopicId">
                <?php
                foreach ($model['listEventTopic'] as $eventTopic) {
                ?>
                    <option value="<?php echo $eventTopic['Id'] ?>" 
                    <?php echo $model['row']['EventTopicId'] === $eventTopic['Id'] ? 'selected = "selected"' : '';?>>
                    <?php echo $eventTopic['Name'] ?></option>
                <?php } ?>
                </select>
            </div>
        </fieldset>
        <div class="feedback"></div>
    </form>
    <?php include('ReadingAll.php'); ?>
</section>

2020-04-08 09:43:58